<template>
	<view class="rent_wrapper"  >
		<view class="rent_left_view">
			<u--text text="小区名称" size="16" lineHeight="28" bold style="margin-top: 20rpx; margin-bottom: 4rpx;"></u--text>
			 <searchPage :searchValue="searchForm.communityName" :backShow="false" @click="tounchNameMethod"></searchPage>
		</view>
		<view class="rent_right_view">
			<u--text text="楼栋号" size="16" lineHeight="28" bold style="margin-top: 20rpx; margin-bottom: 8rpx;"></u--text>
			<view class="content">
				<view class="tag_wrp">
					<u--input placeholder="请输入" border="surround" type="number" v-model.trim="searchForm.buildingNumber"
						inputAlign="left"></u--input>
				</view>
			</view>
			<u--text text="门牌号" size="16" lineHeight="28" bold style="margin-top: 20rpx; margin-bottom: 8rpx;"></u--text>
			<view class="content"  style="margin-bottom: 140%;">
				<view class="tag_wrp">
					<u--input placeholder="请输入" border="surround" type="number"
						v-model.trim="searchForm.ventricleNumber" inputAlign="left"></u--input>
				</view>
			</view>

			
		

		
		</view>
		<view class="btn_wrp">
			<view class="btn">
				<u-button ripple @click="searchReset">重置</u-button>
			</view>
			<view class="btn">
				<u-button color="rgb(240, 90, 35)" ripple @click="searchSubmit">确定</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	
	import searchPage from "../home/search.vue";
	
	export default {
		data() {
			return {
				searchForm: {

				}
			}
		},
		created() {
			this.searchForm = this.$store.state.searchForm

		},
		components: {
			searchPage
		},
		methods: {
			tounchNameMethod(name) {
				// console.log(name);
				this.searchForm.communityName = name
			},

			searchReset() {
				// this.searchForm.communityName=''
				// this.searchForm.ventricleNumber=''
				for (var key in this.searchForm) {
					this.searchForm[key] = null
				}
				this.$emit('result')
			},

			searchSubmit() {

				this.showSearch = false;
				this.$emit("search", {
					communityName: this.searchForm.communityName,
					ventricleNumber: this.searchForm.ventricleNumber,
					buildingNumber: this.searchForm.buildingNumber
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	::v-deep .search_page .header_search[data-v-761fbcef] {
    display: flex;
    padding: 10px;
    overflow: hidden;
    box-sizing: border-box;
    height: 38px;
}
	
	.rent_wrapper {
		// width: 80%;
		// padding: 30rpx;
		margin-top: 30rpx;
		width: 100%;
		box-sizing: border-box;
		padding: 0;
	 
		.rent_left_view {
			width: 53%;
			float: left;
			margin-right: 2%;
		}
		.rent_right_view {
			width: 45%;
			float: right;
			.content {
				margin-bottom: 20rpx;

				.input {

					display: flex;
					justify-content: flex-start;
					align-items: center;
					padding: 10rpx 0;


					.input_i {
						width: 200rpx;
						height: 70rpx;

					}
				}

				.tag_wrp {
					display: flex;
					flex-wrap: wrap;

					.item {
						flex-basis: 100%;
						max-width: calc(100% / 3);
						flex-grow: 1;

						.label {
							width: 80%;
							height: 50rpx;
							line-height: 50rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 25rpx;
							margin: 0 10%;
							color: rgb(102, 102, 102);
							background: rgba(115, 110, 110, 0.07);
							margin-top: 20rpx;
						}
					}
				}



			}
		}
		.btn_wrp {
			// padding: 20rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 20rpx 0;
			height: 100rpx;
			width: 100%;
			.btn {
				margin: 0 10rpx;
				flex: 1;
			}
		}
		
		.activ_change_color {
			background-color: rgb(240, 90, 35) !important;
			color: #fff !important;
		}
	}
</style>